<script setup lang="ts">
  import { computed, onMounted, reactive, ref } from 'vue'
  import { Search } from '@element-plus/icons-vue'
  import student from '../utils/students'
  import { sendmsgs , reqdetemsg , reqsearmsg} from '../api/index'

  let multipleSelection = ref([])
  let tableData = ref([])

  let  handleSelectionChange = (val:any) =>{
      multipleSelection.value = val
  }
  // 获取input值
  let myinput = ref('')

  onMounted( async()=>{
    let studentdata = (await student()).studentlist
    tableData.value = studentdata.data
  })
  // 控制弹出框是否显示
  const dialogTableVisible = ref(false)
  // 添加的成员信息
  let person  = reactive({
    name:'',
    age:'',
    sex:'',
    date:'',
    address:''
  })
  // 添加信息
  let addmsg = ()=>{
    dialogTableVisible.value = true
  }

  // 向数据库中添加信息
  let sendmsg = async ()=>{
    let {name,age,sex,date,address} = person
    
    let res = await sendmsgs(name,age,sex,date,address)
    console.log(name,age,sex,date,address);
    
    if(res.data.code == 200){
      dialogTableVisible.value = false
      // 强刷页面
      window.location.reload()
    }
  }

  // 删除信息
  let detemsg = async ()=>{
    console.log(multipleSelection.value);
    let res = (await reqdetemsg(multipleSelection.value))
    console.log(res);
    if(res.data.code == 200){
       // 强刷页面
       window.location.reload()
    }
  }

  // 修改数据
  let changemsg = ()=>{
    console.log(1111);
  }

  // 搜索
  let searmsg = async ()=>{
    // console.log(111);
    
    let content  = myinput.value
    let res = await reqsearmsg(content)
    console.log(res.data);
    tableData.value = res.data.data

  }


</script>

<template>
  <div class="container">
      <div>
        <el-input
          v-model="myinput"
          class="myinput"
          size="large"
          placeholder="Please Input"
          :suffix-icon="Search" center
          @keydown.enter="searmsg"
          />
        <el-button @click="addmsg" type="primary">添加</el-button>
        <el-button @click="detemsg" type="danger">删除</el-button>
        <el-button @click="changemsg"  type="warning">修改</el-button>
      </div>

      <!-- 弹出框显示的内容 -->
      <el-dialog v-model="dialogTableVisible" title="请输入成员信息" width="600px">
        姓名：<el-input v-model="person.name" placeholder="Please input name" /><br><br>
        年龄：<el-input v-model="person.age" placeholder="Please input age" /><br><br>
        性别：<el-input v-model="person.sex" placeholder="Please input sex" /><br><br>
        日期:<el-input  v-model="person.date"  placeholder="Please input date" /><br><br>
        地址：<el-input v-model="person.address"  placeholder="Please input address" />
        <br>
        <br>
        <el-button @click="sendmsg">确定</el-button>
      </el-dialog>

      <el-table
          ref="multipleTableRef"
          :data="tableData"
          style="width: 100%"
          @selection-change="handleSelectionChange"
        >
      <el-table-column type="selection" width="55" />
      <el-table-column property="name" label="姓名" width="120" />
      <el-table-column property="age" label="年龄" width="120" />
      <el-table-column property="sex" label="性别" width="120" />
      <el-table-column label="日期" width="120">
        <template #default="scope">{{ scope.row.date }}</template>
      </el-table-column>
      <el-table-column property="address" label="地址" show-overflow-tooltip />
    </el-table>

    <span>现有个{{ tableData.length  }}学生</span>
  </div>
</template>

<style scoped lang="less">
.read-the-docs {
  color: #888;
}
.container{
  margin: 10px 20px;
  >div{
    width: 100%;
    .myinput{
      width: 50%;
      margin-right:20px ;
    }
    .el-table{
      margin: 20px ;
    }
  }
}
</style>
